<template>
    <el-form-item label="付费类型" prop="paytype">
        <el-switch v-model="localmediaFormPayData.paytype" active-color="#ff4949" inactive-color="#13ce66"
            :active-value="1" :inactive-value="0" @click="handleClickSwitch" active-text="付" inactive-text="免"
            inline-prompt />
    </el-form-item>
    <!--<el-form-item v-if="localmediaFormPayData.ifpay == '1'">
    <el-button @click="handleAddPay">添加套餐</el-button>
</el-form-item>-->
    <template v-if="localmediaFormPayData.paytype == '1'">
        <el-divider></el-divider>
        <template v-for="(item,index) in localmediaFormPayData.prices" :key="index">
            <el-row justify="space-between" style="margin-bottom: 10px;">
                <el-col :span="4" class="mediatitle">
                    套餐{{index+1}}
                    <span class="default" v-if="item.ifdefault == 1">默认套餐</span>
                </el-col>
                <el-col :span="4" class="right">
                    <el-button v-if="item.ifdefault == 0 || item.ifdefault == undefined"
                        @click="handleDefaultPay(index)" size="mini" class="tjbtn">
                        <span>设为默认</span>
                    </el-button>
                    <el-button @click="handleDelPay(index)" size="mini" class="tjbtn">
                        <el-icon>
                            <delete />
                        </el-icon>
                        <span>删除</span>
                    </el-button>
                </el-col>
            </el-row>
            <el-form-item label="套餐名称" prop="payname">
                <el-input v-model="item.name" placeholder="请输入套餐名称"></el-input>
            </el-form-item>
            <el-form-item label="原价" prop="oprice">
                <el-input-number v-model="item.oprice" :precision="2" :step="1" :min="0.01" />
                <!--
                <el-input v-model.number="item.oprice" placeholder="请输入原价（单位：分）"></el-input>-->
            </el-form-item>
            <el-form-item label="促销价" prop="pprice">
                <el-input-number v-model="item.pprice" :precision="2" :step="1" :min="0.01" />
                <!--<el-input v-model.number="item.pprice" placeholder="请输入促销价（单位：分）"></el-input>-->
            </el-form-item>
            <el-form-item label="套餐天数" prop="days">
                <el-input v-model.number="item.days" placeholder="请输入套餐天数"></el-input>
            </el-form-item>
            <el-form-item label="套餐标签" prop="tags">
                <el-select v-model="item.tags" multiple filterable allow-create default-first-option
                    :reserve-keyword="false" placeholder="请输入套餐标签">
                </el-select>
            </el-form-item>
            <el-form-item prop="ifcontinuous" label="自动续费">
                <el-radio key="1" :label="1" :value="1" v-model="item.ifcontinuous">是</el-radio>
                <el-radio key="0" :label="0" :value="0" v-model="item.ifcontinuous">否</el-radio>
            </el-form-item>
            <el-form-item prop="intro" label="套餐简介" class="txtareabox">
                <el-input v-model="item.intro" type="textarea" placeholder="请输入套餐简介"></el-input>
            </el-form-item>
        </template>
        <el-button @click="handleAddPay" class="btn-add">添加套餐</el-button>
    </template>
</template>

<script setup>
    import { defineProps, toRef} from 'vue'
    import {Delete} from '@element-plus/icons'
    import {ElMessage} from 'element-plus'
    const props = defineProps({
        mediaFormPayData: {
            type: Object
        }
    })

    const localmediaFormPayData = toRef(props,'mediaFormPayData')
    localmediaFormPayData.value.prices == undefined ? localmediaFormPayData.value.prices = [] : ''
    const handleClickSwitch = () => {
        localmediaFormPayData.value.prices.length == 0 ? localmediaFormPayData.value.prices.push({ 'ifcontinuous': 0, 'oprice': 1, 'pprice': 0.99, 'ifdefault': 0 }) : ''
    }

    const handleAddPay = () =>{
        localmediaFormPayData.value.prices.push({ 'ifcontinuous': 0, 'oprice': 1, 'pprice': 0.99, 'ifdefault':0 })
    }
    const handleDelPay = (key) => {
        if (localmediaFormPayData.value.prices.length == 1 ){
            ElMessage({type: 'warning', message: '媒资付费时，至少要有一个套餐项', duration: 2000})
            return
        }
        localmediaFormPayData.value.prices.splice(key,1)
    }

    const handleDefaultPay = (key) => {
        for ( let i in localmediaFormPayData.value.prices ){
            localmediaFormPayData.value.prices[i].ifdefault = 0
        }
        localmediaFormPayData.value.prices[key].ifdefault = 1
    }
</script>

<style scoped  lang="scss">

.mediatitle{
    margin-top: 5px;
    &:first{
      margin-top: 0;
    }
    display:inline-block;
    margin-right: 10px;
    font-weight: bold;
    font-size: 14px;
}
.mediatitle span{
    margin-left: 20px;
    color: #F56C6C;
}
.btn-add{
    width:85%;
    background-color: rgba(222,222,222,0.4);
    color:#3D73F2;
    height: 80px;
    display: block;
    margin:30px auto;
    border:0 !important;
    font-weight: bold;
}
</style>
